<template>
  <div class="container">
    <div style="float: left; width: 18%;">
      <tree-List
        treeTitle="组织架构"
        :companyData="companyData"
        :defaultProps="defaultProps"
        @handleNodeClick="handleNodeClick"
      />
    </div>
    <div style="float: left; width: 82%; height: auto">
      <layout-card
        v-model="search"
        :filters="exampleOptions"
        headline="信息列表"
        headtitle="数据筛选"
        :hasButton="true"
        @search-change="getData"
        @search-reset="getData"
      >
        <template #action>
          <el-button type="primary" @click="handleCreate">导出</el-button>
          <el-button type="primary" @click="handleCreate">新增</el-button>
        </template>
        <table-common
          :columns="exampleColumns"
          :loading="loading"
          :pagination="pager"
          :table-data="data?.data?.list"
          size="large"
          @current-change="changeCurrent"
          @size-change="changePageSize"
        >
          <!-- 提示：需要格式化显示内容的字段值根据实际情况修改，此处示例使用的是area  -->
          <template #area="{row}">
            <el-popover
              placement="bottom"
              :width="260"
              trigger="click"
              content="若需进入隔离区，则请办理相关证件!"
              v-if="row['area']==='隔离区'"
            >
              <template #reference>
                <el-text type="primary">
                  <el-icon><Warning /></el-icon>
                </el-text>
              </template>
            </el-popover>
            {{ row['area'] }}
          </template>
          <!-- 提示：需要格式化显示内容的字段值根据实际情况修改，此处示例使用的是state  -->
          <template #state="{row}">
            <!-- 提示：此处状态值根据具体业务来处理，此处仅做自定义列示例  -->
            <el-text v-if="row['state']==='0'">草稿中</el-text>
            <el-text v-else-if="row['state']==='1'">待审批</el-text>
            <el-text type="danger" v-else-if="row['state']==='2'">已审批</el-text>
            <el-text v-else-if="row['state']==='3'">已准入</el-text>
            <el-text type="danger" v-else-if="row['state']==='4'">已过期</el-text>
            <el-text v-else-if="row['state']==='5'">已作废</el-text>
            <el-text v-else-if="row['state']==='6'">已准出</el-text>
            <br>
            <el-text type="error" v-if="row['stateText']!==''">
              {{(row['stateText'] )}}
            </el-text>
          </template>
          <template #process="{row}">
            <!-- 提示：此处状态值根据具体业务来处理，此处仅做自定义列示例  -->
            <el-text type="success" v-if="row['process']==='1'">已完成（10/10）</el-text>
            <el-text type="warning" v-else-if="row['process']==='2'">执行中（2/20）</el-text>
            <el-text type="danger" v-else-if="row['process']==='3'">未开始 （0/20）</el-text>
          </template>
          <template #action="{row}">
            <!-- 自定义操作栏示例  -->
            <el-button class="link-btn" @click="handleEdit(row)" link type="primary">编辑</el-button>
            <el-button class="link-btn" link type="danger">删除</el-button>
          </template>
        </table-common>
      </layout-card>
    </div>
  </div>
  <edit-dialog
    :centerDialogVisible="centerDialogVisible"
    :tilte="addTilte"
    :key="timer"
    @Cancel="Cancel"
    @Submit="Submit"
  >
    <template #content>
      <layout-card
        v-model="search"
        :filters="dialogType"
        :hasButton="false"
      >
      </layout-card>
    </template>
  </edit-dialog>
</template>

<script lang="ts" setup>
// 需要导入watch监听
import { computed, ref, onBeforeMount } from 'vue'
// 7-18修改LayoutCard 页面，hasButton参数为false时显示为弹窗样式，为true时显示为搜索栏样式
import LayoutCard from '@/components/LayoutCard/index.vue'
import TableCommon from '@/components/TableCommon/index.vue'
import { exampleColumns, demoColumns } from '@/views/Demo/config/columns'
import { exampleOptions } from '@/views/Demo/config/filters'
import { usePagination } from 'vue-request'
import editDialog from '@/components/editDialog/index.vue'
// 新增tree组件导入
import treeList from '@/components/TreeList/index.vue'
// =============模拟接口数据-START
// 此处是模拟的接口返回数据，项目中请用`@/api/`下接口代替，删除当前代码！
const Service = (data: ListParams) => {
  return new Promise((resolve) => {
    // 模拟数据写入，实际开发使用接口数据写入
    setTimeout(() => {
      const response = {
        params: data,
        data: {
          list: [
            { project: '运行保障巡查1', area: '隔离区', problemType: '2023年10KV进线柜巡查', startTime: '2022/9/15', endTime: '2022/9/15', creator: '朱国刚1', createTime: '20220221 13:45:22 20', state: '0', process: '3' },
            { project: '运行保障巡查2', area: '隔离区', problemType: '2023年10KV进线柜巡查', startTime: '2022/9/15', endTime: '2022/9/15', creator: '朱国刚2', createTime: '20220221 13:45:22 20', state: '1', process: '1' },
            {
              project: '运行保障巡查3', area: '非隔离区', problemType: '2023年10KV进线柜巡查', startTime: '2022/9/15',
              endTime: '2022/9/15', creator: '朱国刚3', createTime: '20220221 13:45:22 20', state: '2', process: '2',
              stateText: "过期：1"
            },
            {
              project: '运行保障巡查4', area: '非隔离区', problemType: '2023年10KV进线柜巡查', startTime: '2022/9/15',
              endTime: '2022/9/15', creator: '朱国刚4', createTime: '20220221 13:45:22 20', state: '3', process: '1',
              stateText: "通过: 1; 驳回: 3"
            },
            { project: '运行保障巡查5', area: '非隔离区', problemType: '2023年10KV进线柜巡查', startTime: '2022/9/15', endTime: '2022/9/15', creator: '朱国刚5', createTime: '20220221 13:45:22 20', state: '4', process: '2' },
            { project: '运行保障巡查6', area: '非隔离区', problemType: '2023年10KV进线柜巡查', startTime: '2022/9/15', endTime: '2022/9/15', creator: '朱国刚6', createTime: '20220221 13:45:22 20', state: '5', process: '3' }
          ],
          total: 100
        }
      }
      resolve(response)
    }, 500)
  })
}
// =============模拟接口数据==END

const {
  run,
  data,
  loading,
  current,
  pageSize,
  total,
  changeCurrent,
  changePageSize
} = usePagination(Service, {
  manual: true,
  pagination: {
    currentKey: 'pageNum',
    pageSizeKey: 'pageSize',
    totalKey: 'data.total'
  }
})

// 7-21新增用于保存下拉列表选择数据
const value = ref<string[]>([])
// 新增弹窗是否打开
const centerDialogVisible = ref(false)
// 弹窗标题
const addTilte = ref('新增问题类型')
// 弹窗页面类型
const dialogType = ref()
// 时间戳，用于确保弹窗页面能加载不同的界面
const timer = ref()
// const visible = ref(false)
// const isAdd = ref(true)
// const handleCreate = () => {
//   isAdd.value = true
//   visible.value = true
// }
// 7-17------------------
// 打开新增窗口
const handleCreate = () => {
  timer.value = new Date().getTime()
  dialogType.value = dialogOptions
  centerDialogVisible.value = true
}
// 以下为树控件必须的部分
const defaultProps = {
  children: 'children',
  label: 'label'
}
const companyData = ref<Tree[]>([
  { // 此处的value、id值是随意定的，应该以实际数据为准
    id: 1,
    label: '全部',
    value: '0',
    children: [
      {
        id: 11,
        label: '机场股份公司',
        value: '0-1',
        children: [
          {
            id: 111,
            label: '航站区管理部',
            value: '0-1-1',
            children: [
              { id: 1111, label: 'Toc', value: '0-1-1-1' },
              { id: 1112, label: '楼宇管理科', value: '0-1-1-2' },
              { id: 1113, label: '服务管理科', value: '0-1-1-3' },
              { id: 1114, label: '安全质量科', value: '0-1-1-4' },
              { id: 1115, label: '电力站', value: '0-1-1-5' },
              { id: 1116, label: '空调水暖站', value: '0-1-1-6' },
              { id: 1117, label: '综合办公室', value: '0-1-1-7' },
              { id: 1118, label: '资产技术科', value: '0-1-1-8' }
            ],
          },
        ],
      }
    ],
  }
])
// 树节点被点击
const handleNodeClick = (data, node, treeNode, e) => {
  console.log(data, node, treeNode, e)
}
// 以上为树控件必须的部分
const handleEdit = (row) => {
  dialogType.value = dialogEditOptions
  // 该循环用于进行编辑页面数据回显，需要字段对应
  dialogEditOptions.forEach(e=>{
    if(row[e.prop]!=null){
      e.defaultValue = row[e.prop]
    }
  })
  timer.value = new Date().getTime()
  addTilte.value = "编辑问题类型"
  centerDialogVisible.value = true
}
// 新增窗口点击取消
const Cancel = () => {
  centerDialogVisible.value = false
  dialogType.value = ""
}
// 新增窗口点击确认
const Submit = () => {
  centerDialogVisible.value = false
}
// 7-17------------------
const pager = computed(() => ({
  currentPage: current.value,
  pageSize: pageSize.value,
  total: total.value,
  // 7-24 手动设置了总页数
  pageCount: Math.ceil(total.value/pageSize.value)
}))
const search = ref({})
// 获取数据
const getData = () => {
  const params = {
    pageNum: current.value,
    pageSize: pageSize.value,
    condition: search.value
  }
  run(params)
}
onBeforeMount(getData)
</script>
